<template>
    <div id="app">
        <div style="margin: 0 auto;max-width: 960px;">
            <el-container>
                <el-header>
                    <el-steps :active="active" align-center finish-status="success">
                        <el-step title="开始"></el-step>
                        <el-step title="系统检测"></el-step>
                        <el-step title="配置数据库"></el-step>
                        <el-step title="导入数据"></el-step>
                        <el-step title="完成"></el-step>
                    </el-steps>
                </el-header>
                <el-main>
                    <el-row>
                        <el-col :span="12" :offset="6" style="min-height: 300px">
                            <router-view></router-view>
                        </el-col>
                        <el-col :span="22" :offset="1">
                            <div class="bottom-nav">
                                <!--<div><el-button v-show="active < 4" @click="++active">点击继续</el-button></div>-->
                                <div><el-button v-show="active > 0 && active < 4" @click="--active" size="mini" >上一步</el-button></div>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import ElFooter from "../node_modules/element-ui/packages/footer/src/main.vue";

    export default {
        components: {ElFooter},
        name: 'app',
        data(){
            return {
                active:0
            }
        },
        mounted:function () {
            let that = this;
            this.$router.app.$on("done",()=>that.active = 6);
            this.$router.app.$on("step",val=>that.active = val);
            this.$router.app.$on("next",()=>that.active++)
        },
        watch:{
            active:function () {
                if( this.active !== 6){
                    this.$router.push("/step_" + this.active)
                }
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

     .bottom-nav{
         display: flex;
         /*flex-direction: row-reverse;*/
         justify-content: space-between;
     }
</style>
